<template>
  <div class="system-update-dashboard">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-title">
          <a-icon type="rocket" class="rocket-icon" />
          <span>系统更新日志</span>
        </div>
        <div class="header-subtitle">智能监控系统功能升级记录</div>
      </div>
      <div class="header-stats">
        <div class="stat-card">
          <div class="stat-number">{{ updateLogs.length }}</div>
          <div class="stat-label">更新项目</div>
        </div>
        <div class="stat-card">
          <div class="stat-number success">{{ runningCount }}</div>
          <div class="stat-label">运行正常</div>
        </div>
        <div class="stat-card">
          <div class="stat-number warning">{{ warningCount }}</div>
          <div class="stat-label">需要关注</div>
        </div>
      </div>
    </div>

    <!-- 图表区域 -->
    <div class="charts-section">
      <a-row :gutter="24">
        <a-col :span="12">
          <a-card class="chart-card" title="系统状态分布" :bordered="false">
            <div class="chart-container">
              <div class="pie-chart" ref="pieChart"></div>
            </div>
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card class="chart-card" title="功能模块统计" :bordered="false">
            <div class="chart-container">
              <div class="bar-chart" ref="barChart"></div>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>

    <!-- 更新日志列表 -->
    <div class="update-logs-section">
      <a-card class="logs-card" title="功能更新详情" :bordered="false">
        <div class="timeline-container">
          <a-timeline>
            <a-timeline-item 
              v-for="(log, index) in updateLogs" 
              :key="index"
              :color="getStatusColor(log.status)"
            >
              <div class="timeline-content">
                <div class="timeline-header">
                  <span class="timeline-title">{{ log.title }}</span>
                  <a-tag :color="getStatusColor(log.status)" class="status-tag">
                    {{ log.status }}
                  </a-tag>
                </div>
                <div class="timeline-description">{{ log.description }}</div>
                <div class="timeline-footer">
                  <a-icon type="clock-circle" />
                  <span>{{ log.timestamp }}</span>
                </div>
              </div>
            </a-timeline-item>
          </a-timeline>
        </div>
      </a-card>
    </div>
  </div>
</template>
  
<script>
import {
  Card,
  Col,
  Icon,
  Row,
  Tag,
  Timeline,
} from "ant-design-vue";
import 'ant-design-vue/dist/antd.css';
import Vue from "vue";

Vue.component(Card.name, Card);
Vue.component(Col.name, Col);
Vue.component(Icon.name, Icon);
Vue.component(Row.name, Row);
Vue.component(Tag.name, Tag);
Vue.component(Timeline.name, Timeline);
Vue.component(Timeline.Item.name, Timeline.Item);

export default {
  name: "SystemUpdateDashboard",
  data() {
    return {
      updateLogs: [
        {
          title: "监控影像质量(噪声失真)评估",
          description: "自动评估画面噪声程度，量化失真影响。",
          status: "系统运行正常",
          timestamp: "2024-01-15 14:30:00"
        },
        {
          title: "监控影像质量(模糊失真)评估",
          description: "检测图像清晰度，评估模糊对识别影响。",
          status: "系统运行正常",
          timestamp: "2024-01-14 16:45:00"
        },
        {
          title: "监控影像质量(压缩失真)评估",
          description: "分析压缩伪影与码率关系，给出质量评分。",
          status: "系统运行正常",
          timestamp: "2024-01-13 09:20:00"
        },
        {
          title: "监控影像质量(亮度对比度)评估",
          description: "测量亮度与对比度偏差，建议优化参数。",
          status: "系统运行正常",
          timestamp: "2024-01-12 11:15:00"
        },
        {
          title: "监控影像雨雾雪自动去除",
          description: "智能去除雨雾雪干扰，提升画面通透度。",
          status: "系统运行正常",
          timestamp: "2024-01-11 13:40:00"
        },
        {
          title: "监控影像光照自适应校准",
          description: "自适应补偿光照变化，稳定曝光与色彩。",
          status: "系统运行正常",
          timestamp: "2024-01-10 15:25:00"
        },
        {
          title: "监控影像对比度自动优化",
          description: "自动增强局部与整体对比度，突出关键细节。",
          status: "系统运行正常",
          timestamp: "2024-01-09 10:30:00"
        },
        {
          title: "粉尘有组织排放智能监测",
          description: "实时监测管道/设备排放粉尘浓度与状态。",
          status: "系统运行正常",
          timestamp: "2024-01-08 14:20:00"
        },
        {
          title: "粉尘有组织排放定位分割",
          description: "精准定位并分割排放区域，提取目标轮廓。",
          status: "系统运行正常",
          timestamp: "2024-01-07 16:10:00"
        },
        {
          title: "粉尘有组织排放浓度预测",
          description: "基于时序数据预测后续排放浓度趋势。",
          status: "系统运行正常",
          timestamp: "2024-01-06 09:45:00"
        },
        {
          title: "粉尘无组织排放浓度识别",
          description: "识别扩散粉尘区域并估算浓度水平。",
          status: "系统运行正常",
          timestamp: "2024-01-05 12:30:00"
        },
        {
          title: "粉尘无组织排放浓度预测",
          description: "预测无组织扩散浓度变化并提前预警。",
          status: "系统运行正常",
          timestamp: "2024-01-04 11:20:00"
        }
      ]
    };
  },
  computed: {
    runningCount() {
      return this.updateLogs.filter(log => log.status === "系统运行正常").length;
    },
    warningCount() {
      return this.updateLogs.filter(log => log.status !== "系统运行正常").length;
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initCharts();
    });
  },
  methods: {
    getStatusColor(status) {
      return status === "系统运行正常" ? "#52c41a" : "#faad14";
    },
    initCharts() {
      // 初始化饼图
      this.initPieChart();
      // 初始化柱状图
      this.initBarChart();
    },
    initPieChart() {
      const pieChart = this.$refs.pieChart;
      if (pieChart) {
        // 创建简单的SVG饼图
        const running = this.runningCount;
        const warning = this.warningCount;
        const total = this.updateLogs.length;
        
        const runningAngle = (running / total) * 360;
        const warningAngle = (warning / total) * 360;
        
        pieChart.innerHTML = `
          <svg width="200" height="200" viewBox="0 0 200 200">
            <circle cx="100" cy="100" r="80" fill="none" stroke="#f0f0f0" stroke-width="20"/>
            <circle cx="100" cy="100" r="80" fill="none" stroke="#52c41a" stroke-width="20" 
                    stroke-dasharray="${(runningAngle / 360) * 502.65} 502.65" 
                    stroke-dashoffset="125.66" transform="rotate(-90 100 100)"/>
            <circle cx="100" cy="100" r="80" fill="none" stroke="#faad14" stroke-width="20" 
                    stroke-dasharray="${(warningAngle / 360) * 502.65} 502.65" 
                    stroke-dashoffset="${125.66 - (runningAngle / 360) * 502.65}" 
                    transform="rotate(-90 100 100)"/>
            <text x="100" y="105" text-anchor="middle" font-size="24" font-weight="bold" fill="#1890ff">${total}</text>
            <text x="100" y="125" text-anchor="middle" font-size="12" fill="#666">总计</text>
          </svg>
          <div style="margin-top: 20px; text-align: center;">
            <div style="display: inline-block; margin: 0 10px;">
              <span style="display: inline-block; width: 12px; height: 12px; background: #52c41a; border-radius: 50%; margin-right: 5px;"></span>
              <span>运行正常 (${running})</span>
            </div>
            <div style="display: inline-block; margin: 0 10px;">
              <span style="display: inline-block; width: 12px; height: 12px; background: #faad14; border-radius: 50%; margin-right: 5px;"></span>
              <span>需要关注 (${warning})</span>
            </div>
          </div>
        `;
      }
    },
    initBarChart() {
      const barChart = this.$refs.barChart;
      if (barChart) {
        // 创建简单的SVG柱状图
        const categories = ['影像质量', '环境处理', '粉尘监测'];
        const values = [4, 3, 5]; // 对应各类别的功能数量
        const maxValue = Math.max(...values);
        const chartHeight = 150;
        const barWidth = 40;
        const spacing = 60;
        
        let bars = '';
        let labels = '';
        
        categories.forEach((category, index) => {
          const barHeight = (values[index] / maxValue) * chartHeight;
          const x = index * spacing + 20;
          const y = chartHeight - barHeight + 20;
          
          bars += `<rect x="${x}" y="${y}" width="${barWidth}" height="${barHeight}" fill="#1890ff" rx="4"/>
                   <text x="${x + barWidth/2}" y="${y - 5}" text-anchor="middle" font-size="12" font-weight="bold" fill="#333">${values[index]}</text>`;
          labels += `<text x="${x + barWidth/2}" y="${chartHeight + 40}" text-anchor="middle" font-size="11" fill="#666">${category}</text>`;
        });
        
        barChart.innerHTML = `
          <svg width="200" height="200" viewBox="0 0 200 200">
            ${bars}
            ${labels}
            <line x1="20" y1="20" x2="20" y2="${chartHeight + 20}" stroke="#e8e8e8" stroke-width="1"/>
            <line x1="20" y1="${chartHeight + 20}" x2="180" y2="${chartHeight + 20}" stroke="#e8e8e8" stroke-width="1"/>
          </svg>
        `;
      }
    }
  },
};
</script>
  
  <style lang="less" scoped>
.system-update-dashboard {
  padding: 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
}

// 页面头部样式
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

.header-content {
  .header-title {
    display: flex;
    align-items: center;
    font-size: 28px;
    font-weight: bold;
    color: #1890ff;
    margin-bottom: 8px;
    
    .rocket-icon {
      font-size: 32px;
      margin-right: 12px;
      animation: rocket-float 2s ease-in-out infinite;
    }
  }
  
  .header-subtitle {
    font-size: 16px;
    color: #666;
    font-weight: 300;
  }
}

.header-stats {
  display: flex;
  gap: 24px;
  
  .stat-card {
    text-align: center;
    padding: 16px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    min-width: 80px;
    transition: transform 0.3s ease;
    
    &:hover {
      transform: translateY(-2px);
    }
    
    .stat-number {
      font-size: 24px;
      font-weight: bold;
      color: #1890ff;
      margin-bottom: 4px;
      
      &.success {
        color: #52c41a;
      }
      
      &.warning {
        color: #faad14;
      }
    }
    
    .stat-label {
      font-size: 12px;
      color: #666;
      font-weight: 500;
    }
  }
}

// 图表区域样式
.charts-section {
  margin-bottom: 24px;
  
  .chart-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    border: none;
    
    .ant-card-head {
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      
      .ant-card-head-title {
        font-weight: 600;
        color: #333;
      }
    }
  }
  
  .chart-container {
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .pie-chart,
    .bar-chart {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }
}

// 更新日志区域样式
.update-logs-section {
  .logs-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    border: none;
    
    .ant-card-head {
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      
      .ant-card-head-title {
        font-weight: 600;
        color: #333;
      }
    }
  }
  
  .timeline-container {
    padding: 16px 0;
    
    .timeline-content {
      background: rgba(255, 255, 255, 0.8);
      border-radius: 8px;
      padding: 16px;
      margin-bottom: 8px;
      border-left: 4px solid #1890ff;
      transition: all 0.3s ease;
      
      &:hover {
        background: rgba(255, 255, 255, 0.95);
        transform: translateX(4px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
      }
      
      .timeline-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
        
        .timeline-title {
          font-size: 16px;
          font-weight: 600;
          color: #333;
        }
        
        .status-tag {
          font-size: 12px;
          font-weight: 500;
        }
      }
      
      .timeline-description {
        font-size: 14px;
        color: #666;
        line-height: 1.5;
        margin-bottom: 12px;
      }
      
      .timeline-footer {
        font-size: 12px;
        color: #999;
        display: flex;
        align-items: center;
        
        .anticon {
          margin-right: 4px;
        }
      }
    }
    
    .ant-timeline-item {
      padding-bottom: 16px;
      
      &:last-child {
        padding-bottom: 0;
      }
    }
  }
}

// 动画效果
@keyframes rocket-float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-5px);
  }
}

// 响应式设计
@media (max-width: 768px) {
  .system-update-dashboard {
    padding: 16px;
  }
  
  .page-header {
    flex-direction: column;
    text-align: center;
    
    .header-stats {
      margin-top: 16px;
      justify-content: center;
    }
  }
  
  .charts-section {
    .ant-col {
      margin-bottom: 16px;
    }
  }
}
</style>
  